<template>
	<div class="shopcat">
		<div class="shopcat_wrapper">
			<div class="shopcat_content" style="display: flex; background: #141d27;font-size: 0;color: rgba(255, 255, 255, 0.4);">
				<div class="shopcat_left" style="flex:1;" @click="shopcartC">
					<div class="logo_wrapper">
						<div class="logo">
							<span class="icon-shopping_cart" :class="shopCarBackground"></span>
							<span class="shopCar_count" v-show="shopCatCount>0">{{shopCatCount}}</span>
						</div>
					</div>

					<div class="price" style="color: #FFFFFF;">
						￥{{totalPrice}}
					</div>

					<div class="desc" style="color: #FFFFFF;">
						另需配送费￥4元

					</div>
				</div>

				<div class="shopcat_right" style="width: 90px;background:#2b333b;">
					<div class="pay" :class="payClass" @click="pay">
						{{payDesc}}
					</div>
				</div>
			</div>
		</div>

		<div class="shopcart_list" ref="listContent" style="position: absolute;top: 0;left: 0;z-index: -1;width: 100%;transform: translate3d(0, -100%, 0);" v-show="IsShow">

			<transition name="fade">
				<div v-show="Ishow">
					<div style="display: flex;justify-content: space-between;background:rgb(220,227,234);padding: 15px;">
						<h4>购物车</h4>
						<span @click="clean">清空</span>
					</div>
					<div style="background: #FFFFFF;" ref="listContent">
						<ul>
							<li style="padding:15px 15px 0" v-for="shoplist in food">
								<div style="border-bottom: 1px solid #CCCCCC;display: flex;justify-content: space-between;padding-bottom: 10px;z-index: 44;">
									<h4 style="color: rgb(7,17,27);font-size: 14px;line-height: 24px;">
					   {{shoplist.name}}
					   </h4>
									<div>
										<span style="vertical-align: middle;font-size: 14px;color:#FA1818;padding-right: 5px;">￥{{shoplist.price*shoplist.count}}</span>
										<div style="display: inline-block;vertical-align: top;">
											<cartcount :food="shoplist">
												<!--@fromChild="getChild"-->
											</cartcount>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</transition>
		</div>

	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import cartcount from '../cartcount/cartcount'
	export default {
		props: {
			food: {
				type: Array
			},
			minPrice: {
				type: Number
			}
		},
		data() {
			return {
				Ishow: false
			}
		},
		methods: {
			pay() {
				if(this.totalPrice >= this.minPrice) {
					window.alert(`支付${this.totalPrice}元`)
					this.food.forEach((foods) => {
						foods.count = 0;
					});
				}

			},
			clean() {
				this.food.forEach((foods) => {
					foods.count = 0;
				});

			},
			shopcartC() {
				if(!this.shopCatCount) {
					return
				}
				this.Ishow = !this.Ishow

			}
		},
		computed: {
			totalPrice() {
				let total = 0
				this.food.forEach((food) => {
					total += food.price * food.count
				})
				return total
			},
			shopCatCount() {
				let count = 0;
				this.food.forEach((food) => {
					count += food.count
				})
				return count
			},
			shopCarBackground() {
				if(this.food.length > 0) {
					return ['color_white', 'background_Bule']
				} else {
					return false
				}
			},
			payDesc() {
				if(this.totalPrice == 0) {
					return `￥${this.minPrice}元起送`;
				} else if(this.totalPrice < this.minPrice) {
					let diff = this.minPrice - this.totalPrice;
					return `￥${diff}元起送`;
				} else {
					return `去结账`
				}
			},
			payClass() {
				if(this.totalPrice < 20) {
					return 'not-enough'
				} else {
					return ['color_white', 'background_Bule']
				}
			},
			IsShow() {
				if(!this.shopCatCount) {
					this.Ishow = false;
					return false;
				}

				return this.shopCatCount
			}

		},
		components: {
			cartcount
		}
	}
</script>

<style scoped="scoped">
   .fade-enter-active, .fade-leave-active {
     transition: all 0.3s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        transform: translateY(200px)
    }
    
    
	.color_white {
		color: #FFFFFF!important;
	}
	
	.background_Bule {
		background: #00A0DC!important;
	}
	
	.not-enough {
		color: rgb(128, 133, 138)!important;
		background: rgb(43, 51, 59)!important;
	}
	
	.shopcat {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 48px;
		background: #141d27;
	}
	
	.logo {
		background: #2b333b;
		width: 100%;
		height: 100%;
		text-align: center;
		border-radius: 50%;
	}
	
	.logo_wrapper {
		width: 56px;
		height: 56px;
		position: relative;
		top: -10px;
		background: #141d27;
		border-radius: 50%;
		margin: 0 8px;
		padding: 6px;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
	}
	
	.price {
		display: inline-block;
		vertical-align: top;
		margin-top: 12px;
		line-height: 24px;
		padding-right: 10px;
		box-sizing: border-box;
		border-right: 1px solid rgba(255, 255, 255, 0.1);
		font-size: 14px;
		font-weight: 700;
	}
	
	.desc {
		display: inline-block;
		vertical-align: top;
		margin: 12px 0 0 12px;
		line-height: 24px;
		font-size: 10px;
	}
	
	.icon-shopping_cart {
		line-height: 47px;
		color: #80858a;
		font-size: 24px;
		width: 100%;
		height: 100%;
		display: inline-block;
		border-radius: 50%;
	}
	
	.pay {
		height: 48px;
		line-height: 48px;
		text-align: center;
		color: #80858a;
		font-size: 14px;
		font-weight: 700;
		width: 100%;
	}
	
	.shopCar_count {
		width: 17px;
		font-size: 12px;
		height: 17px;
		position: absolute;
		left: 5px;
		top: 0;
		border-radius: 50%;
		background: #e61111eb;
		color: #fff;
		line-height: 17px;
	}
	/*动画效果*/
	
	.fold-enter-active,
	.fold-leave-active {
		transition: all .9s;
	}
	
	.fold-enter {
		transform: translate3D(0, 0, 0)
	}
	
	.fode-leave {
		transition: all .9s ease;
		transform: translateY(-10px)
	}
</style>